<template>
  <div>

    <div class="msg-show">
      <div class="person-show"
           @click="personShow">
            <!-- <span>{{$t("message.selectPersonNum")}}</span> <span>{{person}}</span> -->
             </div>
      <div class="table-show">
        <!-- <span>{{$t("message.tableNumber")}}:</span> -->
         <span>{{t_num}}</span></div>
    </div>

    <!--购物车组件-->
    <div class="shop-cart">
      <div class="content"
           @click="toggleList">
        <!--购物车左栏-->
        <div class="content-left">

          <div class="price-wrapper">

            <div class="logo-wrapper"
                 :class="[left_active=='_active'?'_active':'']">
              <!-- :class="{'highlight':totalCount>0} -->
              <div class=""
                   :class="[logo ==1?'logo':'returnlogin','highlight'&&totalCount>0]">
                <!-- <i class="icon-shopping_cart" -->
                <i class=""
                   :class="{'highlight':totalCount>0}"></i>
              </div>
              <div class="num"
                   v-show="totalCount>0">{{totalCount}}</div>
            </div>

            <div class="bag">
              <div v-show="isOpenCall"
                   v-if="show"
                   class="desc">
                <img src="../../../static/imgs/call_service.png"
                     width="24"
                     @click.stop.prevent="callService(1)" />
              </div>
            </div>
            <div class="bag">
              <div v-show="isOpenCall"
                   v-if="show"
                   class="pay">
                <img src="../../../static/imgs/money.png"
                     width="24"
                     @click.stop.prevent="callService(2)" />
              </div>
            </div>
            <!-- :class="{'highlight':totalPrice>0 || totalCount>0,'service':isOpenCall }"
                 :class="[right_active=='__active'?'__active':'']"  -->

            <!-- 价格 -->
            <div class="price"
                 :class="[right_active=='__active'?'__active':'', isOpenCall&&'service',(totalPrice>0||totalCount>0)&&'highlight',isOpenCall_inform_class==3&&'isOpenCall_inform',isOpenCall_inform_class==4&&'isOpenCall_informtow']">
              {{currencyDefault}}{{totalPrice}}
            </div>

            <!-- 判断出现铃铛 -->
            <!-- <div v-show="isOpenCall"
                 class="desc">
              <img src="../../../static/imgs/call_service.png"
                   width="28"
                   @click.stop.prevent="callService(1)" />
            </div>

            <div v-show="isOpenCall"
                 class="pay">
              <img src="../../../static/imgs/pay.png"
                   width="28"
                   @click.stop.prevent="callService(2)" />
            </div> -->

          </div>
        </div>
        <!--/购物车左栏-->
        <!--购物车右栏-->
        <div class="content-right"
             @click.stop.prevent="pay"
             v-show=falg>
          <div class="pay"
               :class="payClass">
            {{payDesc}}
          </div>
        </div>
        <!--/购物车右栏-->
      </div>
      <div class="ball-container">
        <div v-for="ball in balls">
          <transition name="drop"
                      @beforeEnter="beforeDrop"
                      @enter="dropping"
                      @afterEnter="afterDrop">
            <div class="ball"
                 v-show="ball.show">
              <div class="inner inner-hook"></div>
            </div>
          </transition>
        </div>
      </div>
      <transition name="fold">
        <div class="shopcart-list"
             v-show="listShow">
          <div class="list-header">
            <h1 class="title">{{$t("message.shopCar")}}</h1>
            <span class="empty"
                  @click="empty">{{$t("message.emptyCar")}}</span>
          </div>
          <div class="list-content"
               ref="listContent">
               <div>
            <ul>
              <li class="food"
                  v-for="(food, foodindex) in selectFoods"
                  :key="foodindex"
                  v-if="food.acount > 0">
                <div class="name-box">
                  <div class="name">{{foodName(food)}}</div>
                  <div class="options"
                       v-if="food.options">{{food.options}}</div>
                </div>
                <div class="price-box">
                  <div class="price">
                    <span>{{currencyDefault}}{{(food.cost*food.acount).toFixed(2)}}</span>
                  </div>
                  <cart-control @add="addFood"
                                @dec="decFood"
                                :food="food"></cart-control>
                </div>
              </li>
 <div class="remark">
              <h5 style="margin-top:20px">{{saymsg}}</h5>

              <textarea class="touchmove" v-model="textareamodel"
                        style="padding:0;border:0;border-radius:5px;background-color:rgba(241,241,241,.98);width: 100%;height:100px;margin-top:20px;resize: none;"></textarea>

            </div>
            </ul>
              
         
</div>
          </div>
        </div>
      </transition>

      <div class="prompt"
           v-show="countDown || Expired"></div>
      <div class="pro-content"
           v-show="Expired">
        <div class="pro-title">{{$t("message.decryptedTxt")}}</div>
      </div>
      <div class="pro-content"
           v-show="countDown">
        <div class="pro-title">{{$t("message.interval1")}}{{intervalTime}}{{$t("message.interval2")}}</div>
        <div class="pro-time">{{$t("message.remain")}} <span v-show="min<10">0</span>{{min}}:<span v-show="sec<10">0</span>{{sec}}
        </div>
      </div>

      <div class="preson-count"
           v-if="personSelect"></div>
      <!-- 选择用餐人数 -->
      <div class="person-box"
           v-if="personSelect">
        <div class="table-title">{{$t("message.tablePerson")}}</div>
        <div class="person-content">
          <div class="person-title">{{$t("message.adult")}}</div>
          <div class="person-wrapper">
            <div class="dec"
                 @click="decAdult">
              <img src="../../../static/imgs/dec.png"
                   height="16"
                   width="16" />
            </div>
            <div class="per-count">{{adult}}</div>
            <div class="inc"
                 @click="addAdult">
              <img src="../../../static/imgs/inc.png"
                   height="16"
                   width="16" />
            </div>
          </div>
        </div>
        <div class="person-content">
          <div class="person-title">{{$t("message.child")}}</div>
          <div class="person-wrapper">
            <div class="dec"
                 @click="decChild">
              <img src="../../../static/imgs/dec.png"
                   height="16"
                   width="16" />
            </div>
            <div class="per-count">{{child}}</div>
            <div class="inc"
                 @click="addChild">
              <img src="../../../static/imgs/inc.png"
                   height="16"
                   width="16" />
            </div>
          </div>
        </div>
        <div class="person-btn"
             @click="personOk">{{$t("message.okBtn")}}</div>
      </div>
    </div>
    <!--/购物车组件-->
    <transition name="fade">
      <div class="list-mask"
           @click="hideList"
           v-show="listShow"
           :class="[mask==1?'mask_Active':'']"></div>
    </transition>
  </div>
</template>

<script>
import bus from '../../store/bus.js'

import BScroll from 'better-scroll' // 引入better-scroll插件
import cartControl from './../cartcontrol/cartcontrol'
import { Toast } from 'mint-ui'
export default {
  components: {
    cartControl
  },
  props: {
    //  选中的菜品 既购物车里面的菜品
    selectFoods: {
      type: Array
    },
    //  服务费等其他费用
    deliveryPrice: {
      type: Number,
      default: 0
    },
    //  货币
    currencyDefault: {
      type: String
    },
    //  是否开启呼叫服务
    // 父组件goods  
    isOpenCall: {
      type: Number
    },
    //  是否开启开关桌限制
    isOpenTable: {
      type: Number
    },
    //  呼叫服务间隔时间
    callIntervalTime: {
      type: Number
    },
    //  桌号
    t_num: {
      type: Number
    }
  },
  data () {
    return {
      different: '',
      saymsg: '',
      logo: 1,
      balls: [
        {
          show: false
        }
      ],
      textareamodel: '',
      show: 1,
      falg: false,
      left_active: '',
      right_active: '',
      dropBalls: [],
      fold: true,
      startOrderTime: 0,
      nowTime: '',
      surplusTimes: 0,
      min: 0,
      sec: 0,
      max: 0,
      intervalTime: 0,
      personCount: 0,
      person: 1,
      adult: 1,
      child: 0,
      personSelect: false,
      order_code: 0,
      order_msg: '',
      selectFoods_filter: [],
      saymsgflavor: [
        { note: '备注', label: 'zh-CN' },// 中文
        { note: 'Bemerkungen', label: 'de' },//德语
        { note: 'remarks', label: 'en' },// 英语
        { note: 'osservazioni', label: 'it' }, //意大利
        { note: 'bemærkninger', label: 'da' },//丹麦
        { note: 'Préférences', label: 'fr' },//法语
        { note: 'Notes', label: 'af' },//荷兰语
        { note: 'Observações', label: 'pt' },//葡萄牙
        { note: 'Observaciones', label: 'es' },//西班牙
        { note: 'Anmärkningar', label: 'sv' }//瑞典
      ],
      // loading
      countDown: false,
      // loading
      Expired: false,
      mask: 0,
      ipAddress: '',
      ipAddressLimit: '',
      ipCode: 0,
      foodsTimeOut: '',
      isOpenCall_inform_class: 0,
      isOpenCall_inform_head: false,
      shopcart: 0,
      // isOpenCall_inform_classtow: 3
    }
  },
  watch: {
    isOpenCall: {
      immediate: true,
      handler (val) {
        if (val == !1) {
          this.isOpenCall_inform_head = true
          this.isOpenCall_inform_class = 3
        }
      }
    },
    touchmove(){
     window.addEventListener('touchmove', function(e) {  
                        var target = e.target;  
                        if (target && target.tagName === 'TEXTAREA') {//textarea阻止冒泡  
                            e.stopPropagation();  
                        }  
                    }, true)
 }
  },
  created () {

    // window.addEventListener('touchmove', function(e) {  
    //                     var target = e.target;  
    //                     if (target && target.tagName === 'TEXTAREA') {//textarea阻止冒泡  
    //                         e.stopPropagation();  
    //                     }  
    //                 }, true)

    bus.$on("shopcatr_type", (res1, res2) => {
      this.shopcart = res2;
      this.different = res1
      this.postscript()
    })

    for (let i = 0; i < this.saymsgflavor.length; i++) {
      if (this.saymsgflavor[i].label == navigator.language) {
        this.saymsg = this.saymsgflavor[i].note
      }
    }
    
    this.$http.get(`${this.$REQ_URL}ctrl=shop&action=jmGetShopfast&shopid=${this.$SHOP_ID}`).then(res => {
      this.max = parseInt(res.data.max)
      this.ipAddressLimit = res.data.ip_address_limit === '' ? '' : res.data.ip_address_limit
      this.ipAddress = res.data.ip_address
      this.ipCode = res.data.ip_address_code
      this.intervalTime = parseInt(res.data.intervaltime)
      this.personCount = parseInt(res.data.personcount)
      //        this.t_num = window.location.href.split('=')[1];
      // 获取上一单时间
      this.$http({
        method: 'POST',
        url: `${this.$REQ_URL}ctrl=order&action=getOrderTime`,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        params: {
          'shopid': this.$SHOP_ID, 'table_num': this.t_num
        }
      }).then(res => {
        switch (res.data.code) {
          case 2:
            // 显示
            this.personSelect = true
            break
          case 1:
            this.personSelect = false
            this.adult = parseInt(res.data.adult)
            this.child = parseInt(res.data.child)
            // this.person = this.adult + this.child
            this.person = res.data.person

        }
        this.effcount = parseInt(res.data.effcount)
        this.startOrderTime = parseInt(res.data.starttime)
        this.nowTime = (Date.parse(new Date()) / 1e3)
        if (this.nowTime - this.startOrderTime < this.intervalTime * 60 && this.effcount >= this.max * this.person) {
          // 进入倒计时
          this.countDown = true
          //          this.personSelect = true;
          let that = this
          that.surplusTimes = this.intervalTime * 60 - (that.nowTime - that.startOrderTime)
          let countdown = window.setInterval(function () {
            that.surplusTimes--
            that.min = Math.floor(that.surplusTimes / 60)
            that.sec = Math.round(that.surplusTimes % 60)
            if (that.surplusTimes <= 0) {
              //              that.personSelect = false;
              clearInterval(countdown)
              countdown = null
              that.countDown = false
            }
          }, 1e3)
        }
      }, () => {
      })
    })
  },
  methods: {

    foodName (item) {
      switch (this.shopcart) {
        case 0:
          return item.name
        case 1:
          return item.en_name
        case 2:
          return item.zh_cn_name
        case 3:
          return item.de_name
      }
    },

    postscript () {
      this.saymsg = ""


      for (let i = 0; i < this.saymsgflavor.length; i++) {
        if (this.saymsgflavor[i].label == this.different) {
          this.saymsg = this.saymsgflavor[i].note
        }
      }
    },
    // 呼叫服务
    callService (callType) {
      if (this.t_num === '' || this.t_num == null) {
        window.alert(this.$t('message.emptyTable'))
        return
      }
      const timestamp = Math.round(new Date().getTime() / 1000).toString()
      this.$http({
        method: 'POST',
        url: `${this.$REQ_URL}ctrl=shopcenter&action=receiveCallService`,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        params: {
          'shopid': this.$SHOP_ID,
          'tableNum': this.t_num,
          'timestamp': timestamp,
          'serviceType': callType
        }
      }).then(res => {
        if (res.data.code === 200) {
          window.alert(this.$t('message.callService'))
        } else if (res.data.code === 401) {
          window.alert(`${this.$t('message.callServiceInterval1')}${this.callIntervalTime}${this.$t('message.callServiceInterval2')}`)
        }
      }, () => {
      })
    },
    // 用餐人数增加成人数
    addAdult () {
      // if (this.adult < this.personCount) {
        this.adult += 1
      // } else {
      //
      // }
    },
    // 用餐人数增少成人数
    decAdult () {
      if (this.adult > 0) {
        this.adult -= 1
      }
    },
    // 用餐人数增加儿童数
    addChild () {
      console.log("addChild");
      // if (this.child < this.personCount) {
        this.child += 1
      // } else {
      //
      // }
    },
    // 用餐人数减少儿童数
    decChild () {
      if (this.child > 0) {
        this.child -= 1
      }
    },
    // 确定用餐人数
    personOk () {
      this.person = this.adult + this.child
      this.personSelect = false
    },
    // 显示用餐人数选择框
    personShow () {
      this.isOpenTable ? console.log(this.isOpenTable) : this.personSelect = true
    },
    // 小球动画
    drop (el) {
      for (let i = 0; i < this.balls.length; i++) {
        let ball = this.balls[i]
        if (!ball.show) {
          ball.show = true
          ball.el = el
          this.dropBalls.push(ball)
          return
        }
      }
    },

    toggleList () {
      if (this.totalCount) {
        if (this.left_active == '') {
          this.logo = 0
          this.left_active = '_active'
          this.show = 0
          this.falg = true
          if (this.isOpenCall_inform_head) {
            this.isOpenCall_inform_class = 3
          }


        } else if (this.left_active == '_active') {
          this.left_active = ''
          this.logo = 1
          if (this.isOpenCall_inform_head) {
            this.isOpenCall_inform_class = 4
          }
          this.falg = false
          this.show = 1
        }
      }
      if (this.totalCount) {
        if (this.right_active == '') {
          this.right_active = '__active'
          if (this.isOpenCall_inform_head) {
            this.isOpenCall_inform_class = 4
          }

        } else if (this.right_active == '__active') {
          this.right_active = ''
          if (this.isOpenCall_inform_head) {
            this.isOpenCall_inform_class = 3
          }
        }
      }
      if (!this.totalCount) {
        return
      }
      this.fold = !this.fold
    },
    hideList () {
      // 点击遮罩层呢
      if (this.isOpenCall_inform_head) {
        this.isOpenCall_inform_class = 3
      }
      this.logo = 1
      this.show = 1
      this.left_active = ''
      this.right_active = ''
      this.falg = false
      this.fold = true
    },
    // 清空购物车
    empty () {
      this.logo = 1
      this.show = 1
      this.right_active = ''
      this.left_active = ''
      this.falg = false
      this.$emit('empty')
      if (this.isOpenCall_inform_head) {
        this.isOpenCall_inform_class = 3
      }

    },
    // 下单
    pay () {
      console.log(this.textareamodel)
      this.mask = 1
      if (!(this.totalPrice >= 0 && this.totalCount > 0)) {
        return
      }
      if (this.t_num === '' || this.t_num == null) {
        window.alert(this.$t('message.emptyTable'))
      } else if (this.ipCode === 1 && this.ipAddressLimit !== this.ipAddress) {
        window.alert(this.$t('message.ipAddressLimit'))
      } else {
        let foodList = []
        this.selectFoods.forEach(food => {
          foodList.push(
            {
              id: food.id,
              name: food.name,
              cost: food.cost,
              count: food.acount,
              shopid: this.$SHOP_ID,
              tablenum: this.t_num,
              specialtype: food.specialtype,
              option_name: food.options
            }
          )
        })
        this.$http.post(`${this.$REQ_URL}ctrl=order&action=kjMakeOrder`, {
          content: this.textareamodel,
          shopid: this.$SHOP_ID,
          contactname: '',
          table_num: this.t_num,
          person_count: this.person,
          adult: this.adult,
          child: this.child,
          minit: '81000',
          goodslist: foodList,
          pscost: 0.00,
          allcost: this.totalPrice,
          allcount: this.totalCount
        })
          .then(res => {
            let msg = res.data.msg
            switch (res.data.code) {
              case 1:
                window.alert(this.$t('message.limitcost'))
                break
              case 2:
                window.alert(this.intervalTime + this.$t('message.over1') + this.max * this.person + this.$t('message.over2') + res.data.over)
                break
              case 4:
                window.alert(msg)
                for (let i = 0; i < this.selectFoods.length; i++) {
                  if (this.selectFoods[i].id === res.data.id_timeout[i]) {
                    this.foodsTimeOut = res.data.id_timeout[i]
                    this.selectFoods[i].acount = 0
                  }
                }
                break
              case 5:
                Toast({
                  message: this.$t('message.orderSuccessful')
                })
                this.empty()
                if (res.data.over === 0) {
                  this.countDown = true
                  let that = this
                  this.startOrderTime = parseInt(res.data.starttime)
                  this.nowTime = (Date.parse(new Date()) / 1e3)
                  that.surplusTimes = that.intervalTime * 60 - (that.nowTime - that.startOrderTime)
                  let countdown = window.setInterval(function () {
                    that.surplusTimes--
                    that.min = Math.floor(that.surplusTimes / 60)
                    that.sec = Math.round(that.surplusTimes % 60)
                    if (that.surplusTimes <= 0) {
                      clearInterval(countdown)
                      countdown = null
                      that.countDown = false
                    }
                  }, 1e3)
                }
                break
              case 6:
                window.alert(this.$t('message.openTable'))
                break
              case 7:
                window.alert(msg)
                break
            }
            this.mask = 0;
          }, () => {
            window.alert(this.$t('message.orderFailed'))
          })
      }
    },


    // 菜单+
    addFood (food, target) {
      this.drop(target)
      this.$emit('add', food, target)
    },
    // 菜单-
    decFood (food, num) {
      this.logo = 0
      this.$emit('dec', food, num)
      if (this.totalCount <= 0) {
        this.hideList();
      }
    },
    beforeDrop (el) {
      let acount = this.balls.length
      while (acount--) {
        let ball = this.balls[acount]
        if (ball.show) {
          let rect = ball.el.getBoundingClientRect()
          let x = rect.left - 32 - 225
          let y = -(window.innerHeight - rect.top - 22)

          el.style.display = ''
          el.style.webkitTransform = `translate3d(0,${y}px,0)`
          el.style.transform = `translate3d(0,${y}px,0)`
          let inner = el.getElementsByClassName('inner-hook')[0]
          inner.style.webkitTransform = `translate3d(${x}px,0,0)`
          inner.style.transform = `translate3d(${x}px,0,0)`
        }
      }
    },
    dropping (el, done) {
      /* eslint-disable no-unused-vars */
      let rf = el.offsetHeight
      this.$nextTick(() => {
        el.style.webkitTransform = 'translate3d(0,0,0)'
        el.style.transform = 'translate3d(0,0,0)'
        let inner = el.getElementsByClassName('inner-hook')[0]
        inner.style.webkitTransform = 'translate3d(0,0,0)'
        inner.style.transform = 'translate3d(0,0,0)'
        el.addEventListener('transitionend', done)
      })
    },
    afterDrop (el) {
      let ball = this.dropBalls.shift()
      if (ball) {
        ball.show = false
        el.style.display = 'none'
      }
    }
  },
  computed: {
    //  总价格
    totalPrice () {
      let total = 0
      this.selectFoods.forEach((food) => {
        total += food.cost * food.acount
      })
      return total.toFixed(2)
    },
    //  总数量
    totalCount () {
      let total = 0
      this.selectFoods.forEach((food) => {
        total += food.acount
      })
      return total
    },
    //  支付详情
    payDesc () {
      if (this.totalPrice >= 0 && this.totalCount > 0) {
        return this.$t('message.makeOrder')
      } else {
        return this.$t('message.selectFo')
      }
    },
    payClass () {
      return this.totalPrice >= 0 && this.totalCount > 0 ? 'enough' : 'not-enough'
    },
    listShow () {
      if (!this.totalCount) {
        this.fold = true
        return false
      }
      let show = !this.fold
      if (show) {
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.listContent, {
              click: true
            })
          } else {
            this.scroll.refresh()
          }
        })
      }
      return show
    }
  }
}
    // background: url("../../../static/imgs/modify.png")
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixin';

.msg-show {
  position: fixed;
  // left: 113px;
  right :5.5%
  // top: 220px;
  top:10px
  dispay: flex;
  color: white;

  .person-show {
    // height: 20px;
    color: #000;
    font-weight: bold;
    margin-top: 6px;
    font-size: 14px;

    span {
      background-size: 100% 100%;
    }
  }

  .table-show {
    top: 144px;
    // height: 30px;
    color: #000;
    font-size: 17px;
    font-weight:bold 
    span {
      // margin-right: 10px;
      font-weight: bold;
      color:#fff
    }
  }
}

.shop-cart {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 50;
  width: 100%;
  height: 48px;

  .content {
    display: flex;
    background: #141d27;
    font-size: 0;
    color: rgba(255, 255, 255, 0.4);

    .content-left {
      flex: 1;
      display: flex;
      position: relative;

      .logo-wrapper {
        display: inline-block;
        vertical-align: top;
        position: absolute;
        top: -10px;
        left: 220px;
        transition: left 0.5s;
        margin: 0 0 0 12px;
        padding: 6px;
        width: 56px;
        flex: 0 0 56px;
        height: 56px;
        box-sizing: border-box;
        border-radius: 50%;
        background: #FFAC00;

        .logo {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          text-align: center;
          background: #2b343c;
          // background: url('../../../static/imgs/shop.png');
          background-size: 100% 100%;

          &.highlight {
            // background: rgb(0, 160, 220);
          }

          .icon-shopping_cart {
            line-height: 44px;
            font-size: 24px;
            color: #80858a;

            &.highlight {
              color: #fff;
            }
          }
        }

        .num {
          position: absolute;
          top: 0;
          right: 0;
          width: 24px;
          height: 16px;
          line-height: 16px;
          text-align: center;
          border-radius: 16px;
          font-size: 9px;
          font-weight: 700;
          color: #fff;
          background: rgb(240, 20, 20);
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
        }
      }

      ._active {
        left: 30px;
        transition: left 0.5s;
      }

      .price-wrapper {
        flex: 1;
        display: flex;
        height: 50px;
        background: #FFAC00;

        .price {
          display: inline-block;
          text-align: center;
          vertical-align: top;
          margin-top: 12px;
          margin-left: 90px;
          padding-right: 12px;
          line-height: 24px;
          height: 24px;
          box-sizing: border-box;
          border-right: 1px solid rgba(255, 255, 255, 0.1);
          font-size: 16px;
          font-weight: 700;
          transition: margin-left 0.5s;

          &.highlight {
            color: #fff;
          }

          &.service {
            flex: 1;
            padding-right: 0;
          }
        }

        .__active {
          margin-left: 37px;
          transition: margin-left 0.5s;
        }

        .desc {
          // flex: 1;
          padding: 0 36px;
          display: inline-block;
          vertical-align: top;
          margin: 12px 0 0 0;
          text-align: center;
          line-height: 24px;
          height: 24px;
          font-size: 10px;
          box-sizing: border-box;
          // border-right: 1px solid rgba(255, 255, 255, 0.1);
          // display: none;
          // background :#626262;
          position: relative;
        }

        .pay {
          padding: 0 36px;
          height: 50px;
          // flex: 1;
          background: #626262;
          display: inline-block;
          vertical-align: top;
          margin: 12px 0 0 0;
          text-align: center;
          line-height: 24px;
          height: 24px;
          font-size: 10px;
          box-sizing: border-box;
          // display: none;
        }
      }
    }

    .content-right {
      flex: 0 0 105px;
      width: 105px;

      .pay {
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-size: 12px;
        font-weight: 700;

        &.not-enough {
          background: #2b333b;
        }

        &.enough {
          background: #00b43c;
          color: #fff;
        }
      }
    }
  }

  .prompt {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    z-index: 99;
  }

  .pro-content {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    text-align: center;
    background-color: #ffffff;
    border-top: 4px solid #13b9f3;
    border-radius: 3%;
    z-index: 400;

    .pro-title {
      line-height: 20px;
      padding: 15px 7px;
      border-bottom: 1px solid #e7e7e7;
      text-align: left;
    }

    .pro-time {
      height: 46px;
      line-height: 46px;
    }
  }

  .preson-count {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
  }

  .person-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 240px;
    text-align: center;
    background-color: #ffffff;
    border: 2px solid rgb(245,160,16);
    border-radius: 8px;

    .table-title {
      background-color: rgb(245,160,16);
      width: 50%;
      height: 40px;
      line-height: 40px;
      margin-left: 25%;
      color: white;
    }

    .person-content {
      height: 50px;
      line-height: 50px;
      text-align: left;
      margin-left: 7.6%;
      width: 100%;
      position: relative;

      .person-max {
        margin-top: 7%;
        font-size: 13px;
      }

      .person-title {
        display: inline-block;
      }

      .person-wrapper {
        width: 30%;
        position: absolute;
        right: 9%;
        display: inline-block;

        .dec {
          display: inline-block;
          margin-right: 5px;
        }

        .per-count {
          display: inline-block;
          font-size: 22px;
          color: rgb(245,160,16);
          padding-right: 2%;
        }

        .inc {
          display: inline-block;
          margin-left: 5px;
        }
      }
    }
  }

  .person-btn {
    margin-top: 28px;
    width: 86%;
    height: 48px;
    line-height: 48px;
    margin-left: 7%;
    /* padding-top 5% */
    /* padding-bottom 5% */
    background-color: rgb(245,160,16);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: white;
  }

  .ball-container {
    .ball {
      position: fixed;
      left: 255px;
      bottom: 22px;
      z-index: 200;
      transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);

      .inner {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: rgb(0, 160, 220);
        transition: all 0.4s linear;
      }
    }
  }

  .shopcart-list {
    position: absolute;
    left: 0;
    top: 100px;
    z-index: -1;
    width: 100%;
    transform: translate3d(0, -93vh, 0);

    &.fold-enter-active, &.fold-leave-active {
      transition: all 0.5s;
    }

    &.fold-enter, &.fold-leave-active {
      transform: translate3d(0, 0, 0);
    }

    .list-header {
      height: 40px;
      line-height: 40px;
      padding: 0 18px;
      background: #f3f5f7;
      border-bottom: 1px solid rgba(7, 17, 27, 0.1);

      .title {
        float: left;
        font-size: 14px;
        color: rgb(7, 17, 27);
      }

      .empty {
        float: right;
        font-size: 12px;
        color: rgb(0, 160, 220);
      }
    }

    .list-content {
      padding: 0 6px 20px 6px;
      max-height:70vh;
      overflow: hidden;
      background: #fff;

      .food {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        box-sizing: border-box;
        border-bottom-1px(rgba(7, 17, 27, 0.1));

        .name-box {
          display: flex;
          flex-direction: column;
          flex: 1;
          overflow: hidden;

          .name {
            line-height: 24px;
            font-size: 12px;
            color: rgb(7, 17, 27);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .options {
            font-size: 10px;
            color: #93999f;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .price-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex: 0 0 148px;

          .price {
            font-size: 14px;
            font-weight: 700;
            color: rgb(240, 20, 20);
          }
        }
      }
    }
  }
}

.list-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 40;
  backdrop-filter: blur(10px);
  opacity: 1;
  background: rgba(7, 17, 27, 0.6);

  &.fade-enter-active, &.fade-leave-active {
    transition: all 0.5s;
  }

  &.fade-enter, &.fade-leave-active {
    opacity: 0;
    background: rgba(7, 17, 27, 0);
  }
}

.msg-show .person-show span {
  display: block;
  width: auto;
  // font-weight: bold;
}

.msg-show .person-show span:nth-child(2) {
  color: #F4511E;
  font-weight: normal;
}

.msg-show .table-show span:nth-child(2) {
  font-weight: normal;
  color: #F4511E;
}

.bag {
  background: #626262;
}

.bag >.desc:after {
  position: absolute;
  right: 1px;
  width: 1px;
  height: 24px;
  background: #fff;
  // background:red;
  content: '';
}

.mask_Active {
  z-index: 999;
}

.wipe_Active {
  z-index: 40;
}

.mint-indicator-wrapper {
  z-index: 9999 !important;
}

.isOpenCall_inform {
  margin-left: 315px !important;
  transition: margin-left 0.5s;
}

.isOpenCall_informtow {
  margin-left: 200px !important;
  transition: margin-left 0.5s;
}

.shop-cart .content .content-left .logo-wrapper .logo {
  background: url('../../../static/imgs/shop.png');
  background-size: 100% 100%;
}

.shop-cart .content .content-left .logo-wrapper .returnlogin {
  background: url('../../../static/imgs/fanhui.png');
  width: 100%;
  height: 100%;
  border-radius: 50%;
  text-align: center;
  background-size: 100% 100%;
}

.list-content ul {
}

.remark {
  // border: 1px solid red;
  // padding: 20px;
}

.remark-textarea {
  margin-top: 20px;
  padding: 10px;
  width: 100%;
  border: 1px solid rgba(7, 17, 27, 0.1);
  height: 100px;
  font-size: 12px;
  padding: 0;
}
</style>
